<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="100px"
    @submit.prevent="handleSubmit"
  >
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name" placeholder="请输入姓名" />
    </el-form-item>
    
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="form.phone" placeholder="请输入手机号" />
    </el-form-item>
    
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email" placeholder="请输入邮箱" />
    </el-form-item>
    
    <el-form-item label="公司名称" prop="company">
      <el-input v-model="form.company" placeholder="请输入公司名称" />
    </el-form-item>
    
    <el-form-item label="职位" prop="position">
      <el-input v-model="form.position" placeholder="请输入职位" />
    </el-form-item>
    
    <el-form-item label="报名类型" prop="type">
      <el-select v-model="form.type" placeholder="请选择报名类型" style="width: 100%">
        <el-option label="参展商" value="exhibitor" />
        <el-option label="观众" value="visitor" />
        <el-option label="媒体" value="media" />
      </el-select>
    </el-form-item>
    
    <el-form-item label="备注" prop="remark">
      <el-input
        v-model="form.remark"
        type="textarea"
        :rows="3"
        placeholder="请输入备注信息"
      />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="handleSubmit" :loading="loading">
        提交报名
      </el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  name: 'RegisterForm',
  emits: ['submit'],
  setup(props, { emit }) {
    const formRef = ref()
    const loading = ref(false)
    
    const form = reactive({
      name: '',
      phone: '',
      email: '',
      company: '',
      position: '',
      type: '',
      remark: ''
    })
    
    const rules = {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
      ],
      company: [
        { required: true, message: '请输入公司名称', trigger: 'blur' }
      ],
      type: [
        { required: true, message: '请选择报名类型', trigger: 'change' }
      ]
    }
    
    const handleSubmit = async () => {
      if (!formRef.value) return
      
      try {
        await formRef.value.validate()
        loading.value = true
        
        // 模拟提交
        setTimeout(() => {
          emit('submit', { ...form })
          loading.value = false
        }, 1000)
      } catch (error) {
        console.log('表单验证失败:', error)
      }
    }
    
    const resetForm = () => {
      if (formRef.value) {
        formRef.value.resetFields()
      }
    }
    
    return {
      formRef,
      form,
      rules,
      loading,
      handleSubmit,
      resetForm
    }
  }
}
</script>

<style scoped>
.el-form {
  padding: 20px 0;
}
</style> 